<template>
    <div class="chose-btn">
      <transition name="move">
        <a class="reduce" v-show="food.count>0" @click.stop.prevent="decreaseCart">-</a>
      </transition>
      <p class="totalprice" v-show="food.count>0">{{food.count}}</p>
      <a class="add" @click.stop.prevent="addCart">+</a>
    </div>
</template>

<script>
    export default {
      name: "chose-btn",
      props: {
        food: {
          type: Object
        }
      },
      methods: {
        addCart(event) {
          // if (!event._constructed) {
          //   return;
          // }
          if (!this.food.count) {
            this.$set(this.food,'count',1);
          }
          else{
            this.food.count++;
          }
          this.$emit('add', event.target);
        },
        decreaseCart(event) {
          // if (!event._constructed) {
          //   return;
          // }
          if (this.food.count) {
            this.food.count--;
          }
        }
      }
    }
</script>

<style scoped>
  .chose-btn{
    display: flex;
    text-align: center;
    align-items: center;
  }
  .chose-btn .reduce, .chose-btn .add{
    height: 40px;/*rem*/
    line-height: 40px;/*rem*/
    width: 40px;/*rem*/
    border-radius: 50%;
    font-size: 20px;/*px*/
  }
  .chose-btn .reduce{
    background-color: #ffffff;
    color: #4993f8;
    border: 1px solid #4993f8;
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0);
  }
  .chose-btn .totalprice{
    font-size: 20px;/*px*/
    color: #6f6f6f;
    padding: 0 20px;/*rem*/
  }
  .chose-btn .add{
    background-color: #4993f8;
    color: #ffffff;
    border: 1px solid #4993f8;
  }
  /*动画*/
  .chose-btn .move-enter-active, .chose-btn .move-leave-active{
    transition: all 0.4s ease-out;
  }
  .chose-btn .move-enter, .chose-btn .move-leave-active{
    opacity: 0;
    transform: translate3d(24px, 0, 0) rotate(360deg);
  }
</style>
